<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>蛛网图</title>
    <meta content="codester" name="Keywords">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <link href="//cdn.bootcss.com/bootstrap/2.3.2/css/bootstrap.min.css" rel="stylesheet">
    <script type="text/javascript" src="./js/jquery-2.1.4.min.js"></script>
    <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
    <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
    <script src="./js/chart.js"></script>

</head>

<body>
<div id="wrapper">
    <article id="radarChart">
        <canvas id="radar" data-type="Radar" width="400" height="400" style="width: 400px; height: 400px;"></canvas>

    </article>
</div>
<SCRIPT>
    $(document).ready(function(){

        var $nav = $("nav dl");

        $("article").each(function(){
            var $el = $(this);
            var $h1 = $el.find("h1");
            var sectionTitle = $h1.html();
            var articleId = $el.attr("id");
            var $dt = $("<dt><a href=\"#"+articleId +"\">"+sectionTitle+"</a></dt>");

            $dt.find("a").on("click",function(e){
                e.preventDefault();
                $('html,body').animate({scrollTop: $h1.offset().top},400);
            });

            $nav.append($dt);

            var $subtitles = $el.find("h2");

            $subtitles.each(function(){
                var $h2 = $(this);
                var title = $h2.text();
                var newID = articleId + "-" +camelCase(title);
                $h2.attr("id",newID);
                var $dd = $("<dd><a href=\"#" +newID + "\">" + title + "</a></dd>");

                $dd.find("a").on("click",function(e){
                    e.preventDefault();
                    $('html,body').animate({scrollTop: $h2.offset().top},400);
                })
                $nav.append($dd);

            });

            var $articles = $el.find("article");

        });

        $("canvas").each(function(){
            var $canvas = $(this);
            var ctx = this.getContext("2d");



            eval($("code[data-for='" + $canvas.attr("id") + "']").text());


            var evalString = "new Chart(ctx)." + $canvas.data("type") + "(data);";

            eval(evalString);

        });
        prettyPrint();

        function camelCase(str){
            var splitString = str.split(" ");

            var returnedCamel = splitString[0].toLowerCase();

            for (var i=1; i<splitString.length; i++){
                returnedCamel += splitString[i].charAt(0).toUpperCase() + splitString[i].substring(1).toLowerCase();
            }

            return returnedCamel;

        }
    });
</SCRIPT>
</body>

</html>